<template>
  <div class="need-test-man">
    <!-- <actions-box :searchForm="[
      { key: 'Unitsname', label: '检测单位' },
      { key: 'addressName', label: '检测地址' },
    ]" :needImportExport="true" @submitSearchRequest="submitSearchRequest" @addItem="showDialog"
      @batchDelete="batchDelete" @batchImport="batchImport" @batchExport="batchExport" ref="child">
    </actions-box> -->
    <div class="search">
      <el-form :inline="true" :model="searchFormContent">
        <!-- <el-form-item label="检测单位">
          <el-select size="small" v-model="searchFormContent.unitsId" placeholder="请选择检测单位"
            @change="getUnitsId($event)">
            <el-option v-for="item in getsearformUnitsName" :key="item.name" :label="item.name" :value="item.unitsId">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="检测单位分区">
          <el-select size="small" v-model="searchFormContent.addressId" placeholder="请选择检测单位分区">
            <el-option v-for="item in getsearformAddressName" :key="item.name" :label="item.name" :value="item.unitsId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="Search">查询</el-button>
          <el-button type="success" size="small" @click="cancelSearch">取消查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="showDialog">新增
      </el-button>
      <el-popconfirm title="这是确定批量删除吗？" @confirm="batchDelete">
        <el-button type="danger" slot="reference" size="small" icon="el-icon-delete" :disabled="delBtlStatus">批量删除
        </el-button>
      </el-popconfirm>
    </div>
    <el-table ref="multipleTable" :data="InfoTable" tooltip-effect="dark" max-height="440px"
      style="width: 100%; margin-top: 20px" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="45" fixed align="center"></el-table-column>
      <el-table-column label="序号" align="center" type="index" :index="indexAdd" width="60">
      </el-table-column>
      <el-table-column prop="tblUnits.name" label="检测单位分区" width="350" sortable align="center">
      </el-table-column>
      <el-table-column prop="addressName" label="检测地址" width="400" sortable align="center">
      </el-table-column>
      <el-table-column prop="icon" label="操作" width="450" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="showInfo(scope.row)">详情</el-button>
          <el-divider direction="vertical"></el-divider>
          <el-button type="text" @click="editInfo(scope.row)">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <template>
            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delHandle(scope.row.addressId)">
              <el-button type="text" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination style="margin-top: 16px" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="page.currentPage" :page-sizes="pageSizes" :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>
    <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100]" :current-page="current"
      :page-size="size" :total="total">
    </el-pagination> -->

    <address-dialog-for-add :dialogVisible="dialogVisible" :info="needShowInfo ? currentInfo : {}"
      :isEditable="isEditable" @closeDialog="closeDialog" ref="subchild" :tblUnitsName="InfoTable"
      :needShowInfo="needShowInfo">
    </address-dialog-for-add>
  </div>
</template>

<script>
// import ActionsBox from "../../components/ActionsBox.vue";
import AddressDialogForAdd from './dialogcomps/AddressDialogForAdd.vue';
import qs from 'qs';
export default {
  data() {
    return {
      // 顶部搜索表单
      // searchForm: {
      //   addressName: "",
      //   Unitsname: "",
      // },
      searchFormContent: {
        unitsId: '',
        addressId: ''
      },
      getsearformUnitsName: [],
      getsearformAddressName: [],
      // 表格信息
      InfoTable: [],
      multipleSelection: [], // 已勾选的内容
      // delBtlStatu: true, // 是否未勾选

      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      pageSizes: [4, 6, 8],
      page: {
        // 默认显示第几页
        currentPage: 1,
        // 默认每页显示的条数（可修改）
        pageSize: 6
      },
      // total: 29, // 总条目数
      // size: 10, // 每页表格显示的条数
      // current: 1, // 当前页码

      dialogVisible: false, // 新增对话框是否显示

      currentInfo: {},  // 选择的行的信息
      needShowInfo: false, // 是否需要将信息展示到dialog
      isEditable: true, // 是否可编辑dialog
      //标记分页接口
      flag: '',
      delBtlStatus: true,
      beSampleUnitsId: JSON.parse(localStorage.getItem("userInfo")).unitsId
    };
  },
  components: {
    // ActionsBox,
    AddressDialogForAdd
  },
  created() {
    this.getAddressList()
    this.getAddressNameList()
  },
  methods: {
    //获取学校单位列表
    // getUnitsNameList() {
    //   this.$axios.post("/gmu/tbl-units/getAllUnitsByRoleId/101") //101为学校roleId
    //     .then(res => {
    //       this.getsearformUnitsName = res.data.data
    //     })
    // },
    //获取选中学校的unitsID
    // getUnitsId(e) {
    //   this.getAddressNameList(e)
    // },
    //获取检测读取列表
    getAddressNameList() {
      this.$axios.get("/gmu/tbl-units/getUnitsByParentId/" + this.beSampleUnitsId)
        .then(res => {
          this.getsearformAddressName = res.data.data
        })
    },
    //查询
    Search() {
      // var PageInfo = {
      //   currentPage: this.current,
      //   pageSize: this.size
      // }
      this.$axios.post("/gmu/tbl-sample-address/getAddressByUnitsId/" + this.searchFormContent.addressId, this.page)
        .then(res => {
          this.InfoTable = res.data.data.sampleAddresses
          this.totalCount = res.data.data.total
          this.flag = 'two'
        })
    },
    cancelSearch() {
      this.getAddressList()
      this.searchFormContent.unitsId = ''
      this.searchFormContent.addressId = ''
    },
    // 实现表格序号自增
    indexAdd(index) {
      return index + 1 + (this.page.currentPage - 1) * this.page.pageSize;
    },
    // params即为子组件传递过来的值
    submitSearchRequest(params) {
      // 发送搜索的请求
      console.log('params: ', params);
    },
    // 展示‘新增’对话框
    showDialog() {
      this.dialogVisible = true;
    },
    // 批量删除
    batchDelete(addressId) {
      var addressIds = []
      if (addressId) {
        addressIds.push(addressId)
      } else {
        this.multipleSelection.forEach(row => {
          addressIds.push(row.addressId)
        })
      }
      this.$axios.delete("/gmu/tbl-sample-address/deleteSampleAddressByIds/" + addressIds).then(res => {
        if (res.data.code == 200) {
          this.getAddressList()
        }
      })
    },
    // 批量导入
    batchImport() { },
    // 批量导出
    batchExport() { },
    //筛选数据
    // filterUnits(value, row) {
    //   return row.tblUnits.name === value;
    // },
    // filterHandler(value, row, column) {
    //   console.log(value, row, column);
    //   const property = column['property'];
    //   return row[property] === value;
    // },
    // 勾选后触发
    handleSelectionChange(val) {
      console.log("勾选项：", val);
      // 获取所有勾选项
      this.multipleSelection = val;
      this.delBtlStatus = val.length == 0;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val
      if (this.flag == 'one') {
        this.getAddressList()
      } else if (this.flag == 'two') {
        this.Search()
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val
      if (this.flag == 'one') {
        this.getAddressList()
      } else if (this.flag == 'two') {
        this.Search()
      }

    },
    // 获取当前页信息
    getAddressList() {
      // var pageInfo = {
      //   "currentPage": this.current,
      //   "pageSize": this.size
      // }
      //获取所有采样地点信息
      this.$axios.post("/gmu/tbl-sample-address/getAllSampleAddress/" + this.beSampleUnitsId, this.page).then(res => {
        if (res.data.code == 200) {
          console.log("检测地点信息: ", res)
          this.InfoTable = res.data.data.tblSampleAddresses
          this.totalCount = res.data.data.total
          this.flag = 'one'
          // this.getUnitsNameList()
        }

      })

    },
    // 关闭dialog
    closeDialog() {
      this.needShowInfo = false;
      this.dialogVisible = false;
      this.currentInfo = {};
      this.isEditable = true;
    },
    // 编辑信息
    editInfo(info) {
      this.needShowInfo = true;
      this.showDialog();
      this.currentInfo = info;
      // console.log(info)
    },
    // 展示信息
    showInfo(info) {
      console.log("showinfo: ", info);
      this.needShowInfo = true;
      this.isEditable = false;
      this.showDialog();
      this.currentInfo = info;
    },
    //删除信息
    delHandle(addressId) {
      console.log(addressId)
      var addressIds = []
      if (addressId) {
        addressIds.push(addressId)
      } else {
        this.multipleSelection.forEach(row => {
          addressIds.push(row.addressId)
        })
      }
      this.$axios.delete("/gmu/tbl-sample-address/deleteSampleAddress?addressId=" + addressIds).then(res => {
        if (res.data.code == 200) {
          this.getAddressList()
        }
      })
    }
  },
};
</script>

<style>
.action-btns {
  display: flex;
  justify-content: space-between;
}

.action-btns>div {
  display: inline-block;
}
</style>
